import { Input } from "antd";
import { useEffect, useState } from "react";
import { getCountryData } from "../utils/utils";
import "./countryList.less";
interface CountryData {
  code: string; //国家编码
  en: string; //国家英文名称
  cn: string; //国家中文名称
  currency_code: string; //货币编码
  currency_cn: string; //货币中文名称
  currency_en: string; //货币英文名称
  symbol: string; //货币符号
  symbol_native: string; //货币原生符号
}
type Props = {
  setCurrentCountry: (value: string) => void;
};

const CountryList: React.FC<Props> = (props) => {
  const { setCurrentCountry } = props;
  const [countryData, setCountryData] = useState<CountryData[]>();
  const [oldData, setOldData] = useState<CountryData[]>();

  useEffect(() => {
    getCountryData().then((res) => {
      setCountryData(res as CountryData[]);
      setOldData(res as CountryData[]);
    });
  }, []);
  const onChange = (e) => {
    const value = e.target.value;
    const newData = oldData?.filter((item) => item?.cn?.includes(value));
    setCountryData([...(newData as CountryData[])]);
  };
  const handleClick = (value: string) => {
    setCurrentCountry(value);
  };
  return (
    <div className="countryList_container">
      <div className="countryList_container_title">国家列表</div>
      <Input placeholder="请输入国家名称搜索" onChange={onChange} style={{margin:'8px 0'}} />
      {countryData?.map((item) => {
        return (
          <div className="countryList_container_content" key={item?.code}>
            <div
              className="countryList_container_item"
              onClick={() => handleClick(item?.cn)}
            >
              {item?.en}
            </div>
          </div>
        );
      })}
    </div>
  );
};
export default CountryList;
